import React from 'react'
import {
  View,
  Text,
  Dimensions,
  Animated,
  StatusBar,
  Platform,
} from 'react-native'
import RootSiblings from 'react-native-root-siblings'


export class Snackbar extends React.Component {

  constructor(props) {
    super(props)

    this.anima = new Animated.Value(-80)
    this.fade = {
      opacity: this.anima.interpolate({
        inputRange: [-60, 0],
        outputRange: [0, 1],
      })
    }
  }

  static _show(props) {
    const sibling = new RootSiblings(
      <Snackbar {...props} />
    )
    Snackbar.elements.push(sibling)
    return sibling
  }

  static info(props = {}) {
    if (props.containerStyle)
      props.containerStyle.backgroundColor = 'royalblue'
    else
      props.containerStyle = { backgroundColor: 'royalblue' }

    return Snackbar._show(props)
  }

  static warn(props = {}) {
    if (props.containerStyle)
      props.containerStyle.backgroundColor = 'orange'
    else
      props.containerStyle = { backgroundColor: 'orange' }

    return Snackbar._show(props)
  }

  static error(props = {}) {
    if (props.containerStyle)
      props.containerStyle.backgroundColor = 'orangered'
    else
      props.containerStyle = { backgroundColor: 'orangered' }

    return Snackbar._show(props)
  }

  static hide() {
    const element = Snackbar.elements.pop()
    element && rsp.destory()
  }

  componentDidMount() {
    const { gap = 0,
      hidingTime = 5000,
      hidedCallback = () => { },
      statusBarBackgroundColor,
      containerStyle } = this.props


    if (statusBarBackgroundColor && Platform.OS == 'android') {
      StatusBar.setBackgroundColor(containerStyle.backgroundColor, true)
    }
    Animated.timing(this.anima, {
      toValue: gap,
      duration: 300,
      useNativeDriver: false
    }).start()

    setTimeout(() => {
      hidedCallback()
      Animated.timing(this.anima, {
        toValue: -this.height,
        duration: 200,
        useNativeDriver: false,
      }).start(() => {
        if (statusBarBackgroundColor && Platform.OS == 'android')
          StatusBar.setBackgroundColor(statusBarBackgroundColor, true)
      })
    }, hidingTime)
  }

  render() {
    const {
      visible = true,
      containerStyle = {},
      textStyle = {},
      position = 'top',
      text,
      children,
    } = this.props

    const pos = position == 'top' ? { top: this.anima } : { bottom: this.anima }

    const _containerStyle = position == 'top' ? styles.topContainer : styles.bottomContainer
    if (visible && (text || children)) {
      return (
        <Animated.View
          style={[_containerStyle, containerStyle, pos, this.fade]}
          onLayout={event => this.height = event.nativeEvent.layout.height}
        >
          {text && <Text style={[styles.text, textStyle]}>{text}</Text>}
          {this.props.children}
        </Animated.View>
      )
    }

    return <></>
  }
}

Snackbar.elements = []

const { width } = Dimensions.get('window')
const height = Platform.OS == 'ios' ? 45 : 6
// const height = StatusBar.currentHeight || 35
const styles = {
  bottomContainer: {
    backgroundColor: 'orange',
    position: 'absolute',
    width: width,
    paddingBottom: 14,
    paddingTop: 14,
    alignItems: 'center',
    zIndex: 2,
  },

  topContainer: {
    backgroundColor: 'orange',
    position: 'absolute',
    width: width,
    paddingBottom: 12,
    paddingTop: height,
    alignItems: 'center',
    zIndex: 2,
  },

  text: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold',
  },
}